<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{placeName}}</view>
		</view>
		<form>
		    <view class="cu-form-group">
				<view class="title">设备序列号</view>
				<input placeholder="请填写(必填项)" v-model="info.deviceSn"></input>
				<button class="cu-btn bg-orange shadow" @click="btnScan()">扫码</button>
		    </view>
			<view class="cu-form-group">
				<view class="title">绑定信息</view>
				<input placeholder="请填写(非必填)" v-model="info.bindNote"></input>
			</view>
		</form>
		<view class="cu-bar btn-group margin-top">
		    <button class="cu-btn bg-grey shadow-blur round" @click="$utils.toBack()">取消</button>
			<button class="cu-btn bg-orange shadow-blur round" @click="btnDeploySubmit()">部署</button>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js'); 
	export default {
		data() {
			return {
				placeId:null,
				placeName:'网点名称',
				info:{}
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.placeId = data.placeId;
				_self.placeName = data.placeName;
			})
		},
		onShow(){
			this._jssdk();
		},
		methods: {
			_jssdk(){
				let url = location.href.split('#')[0];
				const api = this.$request;
				api.post(api.url.wxSDK,{
					appId:this.$store.getters.GET_AppId,
					url:url
				},res=>{
					console.log(res)
					if(res.code==200){
						const data = res.body;
						wx.config({
						  debug: false,
						  appId: data.config.appId,        // 必填，公众号的唯一标识
						  timestamp: data.config.timestamp,// 必填，生成签名的时间戳
						  nonceStr: data.config.nonceStr,  // 必填，生成签名的随机串
						  signature: data.config.signature,// 必填，签名
						  jsApiList: ['scanQRCode']        // 必填，需要使用的JS接口列表
						});
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
					}
				})
			},
			btnScan(){
				const _self = this;
				wx.ready(()=>{
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res.resultStr);
							let arr = res.resultStr.split('/');
							_self.info.deviceSn = arr.pop();
							_self.$forceUpdate();
						}
					})
				})
			},
			btnDeploySubmit(){
				if(!this.info.deviceSn){
					uni.showModal({
						title:'温馨提示',
						content:'请输入或扫码设备序列号',
						showCancel:false
					})
					return
				}
				
				let info = this.info;
				info.placeId = this.placeId;
				
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeDeviceDeploy,info,res=>{
					console.log(res)
					if(res.code==200){
						uni.showModal({
							content:'部署成功',
							confirmText:'继续操作',
							complete:function(res){
								if(res.confirm){
									_self.info = {};
								}else{
									uni.navigateBack();
								}
							}
						})
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}
.container .cu-form-group .title {min-width: calc(5em + 30rpx);}
</style>
